import React from 'react';
import {FlatList, StyleSheet, Text, View} from 'react-native';
import moment from 'moment';

// 定义列表项数据的类型
type Item = {
  x: string;
  y: number;
};

// 定义组件的 props 类型
type CustomFlatListProps = {
  data?: Item[];
};

const LHLTableView: React.FC<CustomFlatListProps> = ({data = []}) => {
  const renderListItem = ({item}: {item: Item}) => {
    return (
      <View style={styles.item}>
        <Text style={styles.title}>{moment(item.x).format('HH: mm')}</Text>
        <Text style={styles.value}>Temperature: {item.y}℃</Text>
      </View>
    );
  };

  const ListHeader = () => {
    return (
      <View style={styles.header}>
        <Text style={styles.title}>Hour</Text>
        <Text style={styles.value}>Temperature (°C)</Text>
      </View>
    );
  };

  return (
    <>
      <ListHeader />
      <FlatList
        style={styles.listStyle}
        data={data}
        renderItem={renderListItem}
        keyExtractor={item => item.x}
      />
    </>
  );
};

const styles = StyleSheet.create({
  listStyle: {
    width: '100%',
    height: 200,
    flex: 1,
  },
  container: {
    flex: 1,
    width: '100%',
    display: 'flex',
    height: 200,
  },
  item: {
    width: '100%',
    backgroundColor: '#F5FCFF',
    padding: 20,
    marginBottom: 1,
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
  },
  title: {
    fontSize: 12,
    width: '50%',
  },
  value: {
    fontSize: 16,
    color: 'green',
    width: '50%',
  },
  header: {
    width: '100%',
    backgroundColor: '#CCEADC',
    display: 'flex',
    alignItems: 'center',
    flexDirection: 'row',
    padding: 20,
  },
});

export default LHLTableView;
